<template>
	<view class="item_border">
		<view class="code" @click="checkImg">
			<canvas id="qrcode" canvas-id="qrcode" :style="{'width': `${size}px`, 'height': `${size}px`}" />
		</view>
		<view class="title">1、请让您的朋友用微信/支付宝扫描下方二维码绑定共享关系。</view>
		<view class="title">2、共享后，朋友省钱，自己提现，一举两得。</view>
		<view class="title">
			3、提现规则：朋友帮花了多少红包，平台则提现（累计满一元自动提现）多少现金到您的账户中。
		</view>
		<view class="title">4、点击可查看大图，长按大图可保存至手机。</view>
	</view>
</template>

<script>
	//邀请入住
	//获取应用实例
	const app = getApp();
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'

	export default {
		data() {
			return {
				maxNum: '',
				size: 256,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				codeImg:null,
			};
		},
		onLoad: function(op) {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					var n = Math.floor(res.windowWidth * 0.2);
					that.setData({
						maxNum: parseInt(n),
						//边距
						size: res.windowWidth - 60
					});
					console.log(n);
				}
			});

			if (op.id != null) {
				// this.generateQrcode('https://zaihuayi.top/memberSharing?id=' + op.id);
				this.generateQrcode('https://zaihuayi.top/memberIndex?id=' + op.id);
			}
		},
		methods: {
			checkImg() {
				uni.canvasToTempFilePath({
					canvasId: "qrcode",
					success: (res) => {
						uni.previewImage({
							urls: [res.tempFilePath] // 需要预览的图片http链接列表
						})
					}
				})
			},
			generateQrcode(str) {
				let modules = uQRCode.getModules({
					text: str,
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				})
				let tileSize = (this.size - this.margin * 2) / modules.length
				// 获取绘图所需的上下文
				let ctx = uni.createCanvasContext('qrcode', this)
				// 开始绘制
				ctx.setFillStyle(this.backgroundColor)
				ctx.fillRect(0, 0, this.size, this.size)
				for (var row = 0; row < modules.length; row++) {
					for (var col = 0; col < modules.length; col++) {
						// 计算每一个小块的位置
						var x = col * tileSize + this.margin
						var y = row * tileSize + this.margin
						var w = tileSize
						var h = tileSize

						var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
						ctx.setFillStyle(style)
						ctx.fillRect(x, y, w, h)
					}
				}
				ctx.draw()
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #f2f3f8;
		/*设置页面背景颜色*/
	}



	.item_border {
		margin: 15px;
		padding: 15px 15px;
		border-radius: 15px;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		background-color: white;
		color: #666;
		box-sizing: content-box;
		font-size: 14px;

		.title {
			margin: 5px 0;
			color: #000;
			text-align: left;
		}
	}
</style>
